<script setup lang="ts">
import {ElMessage} from "element-plus";

defineOptions({name:'Permission'})
import {onMounted,ref} from "vue";
import {reqAllPermission,reqAddOrUpdateMenu,reqRemoveMenu} from '@/api/acl/permission/index.ts'
import type {PermissionResponseData,PermissionList,Permission,MenuParams} from '@/api/acl/permission/type.ts'

const permissionList=ref<PermissionList>()
const getPermissionList = async () => {
  const res:PermissionResponseData =await reqAllPermission()
  permissionList.value=res.data
  console.log(res)
}
onMounted(()=>{
  getPermissionList()
})
//编辑权限菜单对话框
const editPerDialog =ref<boolean>(false)
//权限对象的映射
const menuData = ref<MenuParams>({
  code: '',
  level: 0,
  pid: 0,
  name: '',
  id: ''
})
/**
 * 编辑权限菜单
 * @param row
 */
const editPer = (row:Permission) => {
  Object.assign(menuData.value,row)
  // console.log(row)
  editPerDialog.value=true
}
/**
 * 添加规则
 * @param row
 */
const addPer = (row:Permission) => {
  Object.assign(menuData.value,{code:'',level:0,pid:0,name:'',id:''})
  menuData.value.level=row.level+1
  menuData.value.pid=row.id as number
  editPerDialog.value=true
}
/**
 * 编辑完成
 */
const save = async () => {
  const res:any =await reqAddOrUpdateMenu(menuData.value)
  if(res.code==200){
    editPerDialog.value = false
    await getPermissionList()
    ElMessage({
      type:'success',
      message:menuData.value.id?'修改成功':'添加成功'
    })
  }
  // console.log(res)
}
/**
 * 删除权限
 * @param id
 */
const deletePer = async (id:number) => {
  const res:any =await reqRemoveMenu(id)
  if(res.code==200){
    await getPermissionList()
    ElMessage({
      type:'success',
      message:'删除成功'
    })
  }
  // console.log(res)
}
</script>

<template>
  <el-table
      :data="permissionList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
  >
    <el-table-column prop="name" label="名称" sortable />
    <el-table-column prop="code" label="权限值" sortable />
    <el-table-column prop="updateTime" label="修改时间" sortable />
    <el-table-column  label="操作" sortable >
      <template #default="{row}">
        <el-button size="small" icon="Plus" type="primary"  :disabled="row.level==4" @click="addPer(row)">{{row.level==3?'添加功能':'添加菜单'}}</el-button>
        <el-button size="small" icon="Edit" type="success" :disabled="row.level==1" @click="editPer(row)">编辑</el-button>
        <el-popconfirm :title="`你确定要删除${row.name}吗？`" @confirm="deletePer(row.id)">
          <template #reference >
            <el-button size="small" icon="Delete" type="danger" :disabled="row.level==1">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="editPerDialog" :title="menuData.id?'修改全选':'添加全选'" width="30%">
    <el-form>
      <el-form-item label="名称">
        <el-input placeholder="请输入名称：" v-model="menuData.name"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-input placeholder="请输入权限数据：" v-model="menuData.code"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
        <el-button @click="editPerDialog = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>